<template>
	<view class="container">
		<!-- 简化的用户信息 -->
		<view class="user-section">
			<text class="app-title">直播语音播报系统</text>
			<text class="version-info">v1.0.0 简化版</text>
		</view>

		<!-- 播放设置 -->
		<view class="setting-section">
			<view class="section-header">
				<text class="section-title">播放设置</text>
			</view>
			<view class="setting-item">
				<view class="item-left">
					<text class="item-icon">🔊</text>
					<text class="item-title">默认音量</text>
				</view>
				<view class="item-right">
					<slider class="volume-slider" 
						:value="globalSettings.defaultVolume" 
						:min="0" :max="100"
						@change="updateSetting('defaultVolume', $event)" />
					<text class="volume-text">{{globalSettings.defaultVolume}}%</text>
				</view>
			</view>
			<view class="setting-item">
				<view class="item-left">
					<text class="item-icon">⏱️</text>
					<text class="item-title">默认停顿间隔</text>
				</view>
				<view class="item-right">
					<picker @change="changeInterval" :value="intervalIndex" :range="intervalOptions">
						<view class="picker-display">
							<text>{{intervalOptions[intervalIndex]}}</text>
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>
			</view>
			<view class="setting-item">
				<view class="item-left">
					<text class="item-icon">🎚️</text>
					<text class="item-title">音频淡入淡出</text>
				</view>
				<switch class="item-switch" :checked="globalSettings.fadeInOut" @change="updateSetting('fadeInOut', $event)" />
			</view>
			<view class="setting-item">
				<view class="item-left">
					<text class="item-icon">🔔</text>
					<text class="item-title">播放通知</text>
				</view>
				<switch class="item-switch" :checked="globalSettings.playNotification" @change="updateSetting('playNotification', $event)" />
			</view>
		</view>

		<!-- 数据管理 -->
		<view class="setting-section">
			<view class="section-header">
				<text class="section-title">数据管理</text>
			</view>
			<view class="setting-item" @click="exportData">
				<view class="item-left">
					<text class="item-icon">📤</text>
					<text class="item-title">导出数据</text>
				</view>
				<view class="item-right">
					<text class="item-desc">导出配置和音频列表</text>
					<text class="item-arrow">></text>
				</view>
			</view>
			<view class="setting-item" @click="importData">
				<view class="item-left">
					<text class="item-icon">📥</text>
					<text class="item-title">导入数据</text>
				</view>
				<view class="item-right">
					<text class="item-desc">从备份文件恢复</text>
					<text class="item-arrow">></text>
				</view>
			</view>
			<view class="setting-item" @click="clearCache">
				<view class="item-left">
					<text class="item-icon">🗑️</text>
					<text class="item-title">清理缓存</text>
				</view>
				<view class="item-right">
					<text class="item-desc">{{cacheSize}}</text>
					<text class="item-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 应用信息 -->
		<view class="setting-section">
			<view class="section-header">
				<text class="section-title">应用信息</text>
			</view>
			<view class="setting-item" @click="aboutApp">
				<view class="item-left">
					<text class="item-icon">ℹ️</text>
					<text class="item-title">关于应用</text>
				</view>
				<view class="item-right">
					<text class="item-desc">v1.0.0</text>
					<text class="item-arrow">></text>
				</view>
			</view>
			<view class="setting-item" @click="showHelp">
				<view class="item-left">
					<text class="item-icon">❓</text>
					<text class="item-title">使用说明</text>
				</view>
				<view class="item-right">
					<text class="item-arrow">></text>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stats-title">使用统计</view>
			<view class="stats-grid">
				<view class="stats-card">
					<text class="stats-number">{{userStats.totalRooms}}</text>
					<text class="stats-label">房间数量</text>
				</view>
				<view class="stats-card">
					<text class="stats-number">{{userStats.totalAudios}}</text>
					<text class="stats-label">音频文件</text>
				</view>
				<view class="stats-card">
					<text class="stats-number">{{userStats.totalGroups}}</text>
					<text class="stats-label">播放组</text>
				</view>
				<view class="stats-card">
					<text class="stats-number">{{formatTime(userStats.totalPlayTime)}}</text>
					<text class="stats-label">播放时长</text>
				</view>
			</view>
		</view>

		<!-- 重置按钮 -->
		<view class="reset-section">
			<view class="reset-btn" @click="resetApp">
				<text>重置应用数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 全局设置
				globalSettings: {
					defaultVolume: 80,
					fadeInOut: true,
					playNotification: true,
					defaultInterval: 30
				},

				// 播放间隔选项
				intervalOptions: ['5秒', '10秒', '30秒', '45秒', '60秒', '2分钟', '5分钟'],
				intervalIndex: 2,

				// 数据信息
				cacheSize: '15.2MB',

				// 用户统计
				userStats: {
					totalRooms: 3,
					totalAudios: 45,
					totalGroups: 8,
					totalPlayTime: 7650 // 秒
				}
			}
		},
		onLoad() {
			this.loadSettings();
		},
		methods: {
			// 加载设置
			loadSettings() {
				try {
					const savedSettings = uni.getStorageSync('globalSettings');
					if (savedSettings) {
						this.globalSettings = { ...this.globalSettings, ...savedSettings };
					}
				} catch (e) {
					console.log('加载设置失败:', e);
				}
			},

			// 保存设置
			saveSettings() {
				try {
					uni.setStorageSync('globalSettings', this.globalSettings);
				} catch (e) {
					console.log('保存设置失败:', e);
				}
			},

			// 更新设置项
			updateSetting(key, event) {
				if (event.detail) {
					this.globalSettings[key] = event.detail.value;
				}
				this.saveSettings();
				
				uni.showToast({
					title: '设置已保存',
					icon: 'success'
				});
			},

			// 改变播放间隔
			changeInterval(e) {
				this.intervalIndex = e.detail.value;
				const intervals = [5, 10, 30, 45, 60, 120, 300];
				this.globalSettings.defaultInterval = intervals[this.intervalIndex];
				this.saveSettings();
			},

			// 导出数据
			exportData() {
				uni.showLoading({
					title: '导出中...'
				});
				
				// TODO: 实际导出逻辑
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '导出成功',
						icon: 'success'
					});
				}, 2000);
			},

			// 导入数据
			importData() {
				uni.chooseFile({
					count: 1,
					type: 'file',
					extension: ['.json'],
					success: (res) => {
						uni.showLoading({
							title: '导入中...'
						});
						
						// TODO: 实际导入逻辑
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '导入成功',
								icon: 'success'
							});
						}, 2000);
					}
				});
			},

			// 清理缓存
			clearCache() {
				uni.showModal({
					title: '清理缓存',
					content: `确定要清理 ${this.cacheSize} 的缓存数据吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '清理中...'
							});
							
							setTimeout(() => {
								uni.hideLoading();
								this.cacheSize = '0MB';
								uni.showToast({
									title: '清理完成',
									icon: 'success'
								});
							}, 1500);
						}
					}
				});
			},

			// 显示帮助
			showHelp() {
				uni.showModal({
					title: '使用说明',
					content: '1. 创建房间并上传音频文件\n2. 配置播放组和播放模式\n3. 开始播放并享受智能语音播报\n\n更多帮助请访问官网',
					showCancel: false
				});
			},

			// 关于应用
			aboutApp() {
				uni.showModal({
					title: '关于应用',
					content: '直播语音播报系统 v1.0.0\n\n专为抖音直播打造的语音播报工具，支持灵活的播放配置和多房间管理。\n\n内部版本 - 简化功能',
					showCancel: false
				});
			},

			// 重置应用
			resetApp() {
				uni.showModal({
					title: '重置应用',
					content: '确定要重置所有应用数据吗？此操作无法撤销！',
					confirmColor: '#ff4757',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.showToast({
								title: '重置完成',
								icon: 'success'
							});
							
							// 重新加载页面
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 1500);
						}
					}
				});
			},

			// 格式化时间
			formatTime(seconds) {
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				
				if (hours > 0) {
					return `${hours}h${minutes}m`;
				}
				return `${minutes}m`;
			}
		}
	}
</script>

<style>
.container {
	background: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 40rpx;
}

/* 用户区域 */
.user-section {
	background: linear-gradient(135deg, #667eea, #764ba2);
	padding: 50rpx 30rpx;
	text-align: center;
	color: #fff;
}

.app-title {
	font-size: 36rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}

.version-info {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 设置区域 */
.setting-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-header {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f8f9fa;
}

.setting-item:last-child {
	border-bottom: none;
}

.item-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
	flex: 1;
}

.item-icon {
	font-size: 32rpx;
	width: 40rpx;
	text-align: center;
}

.item-title {
	font-size: 28rpx;
	color: #333;
}

.item-right {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.item-desc {
	font-size: 24rpx;
	color: #999;
}

.item-arrow {
	font-size: 24rpx;
	color: #ccc;
}

.item-switch {
	transform: scale(0.8);
}

/* 滑块样式 */
.volume-slider {
	width: 200rpx;
}

.volume-text {
	font-size: 24rpx;
	color: #667eea;
	font-weight: 600;
	min-width: 60rpx;
	text-align: right;
}

/* 选择器样式 */
.picker-display {
	display: flex;
	align-items: center;
	gap: 15rpx;
	padding: 15rpx 20rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #333;
}

.picker-arrow {
	font-size: 20rpx;
	color: #999;
}

/* 统计区域 */
.stats-section {
	background: #fff;
	margin: 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.stats-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
	text-align: center;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.stats-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 12rpx;
	color: #fff;
}

.stats-number {
	font-size: 36rpx;
	font-weight: 600;
}

.stats-label {
	font-size: 24rpx;
	opacity: 0.8;
}

/* 重置区域 */
.reset-section {
	margin: 40rpx 20rpx;
}

.reset-btn {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	color: #ff4757;
	font-weight: 600;
	border: 2rpx solid #ff4757;
}

.reset-btn:active {
	background: #fff5f5;
}
</style>
